<template>
  <up-search class="input-search" :placeholder="placeholder" :clearabled="true" v-model="innerValue" :showAction="true"
    actionText="搜索" :actionStyle="actionStyle" @custom="search" @search="search" />
</template>

<script setup>
import { debounce } from '@/utils/index.js'; // 用防抖优化请求频率（下面给出）
import { ref, watch } from 'vue';

const props = defineProps({
  modelValue: String,
  placeholder: {
    type: String,
    default: '请输入'
  }
});
const actionStyle = {
  background: '#0081ff',
  padding: '15rpx',
  color: '#fff',
  borderRadius: '60rpx'
};

// 声明事件
const emit = defineEmits(['search', 'update:modelValue'])
const innerValue = ref(props.modelValue);

watch(innerValue, (val) => {
  emit('update:modelValue', val)
})

const search = debounce(function () {
  emit('search', innerValue.value)
}, 500);
// 触发搜索（加防抖）
</script>